✅Tweetを取り込むPopup menu v2：動画も引用できるようにする
利用した感想
大きい動画がページに挟まると見づらいので一番小さいのでいいかも
video要素を眺める
video.poster サムネイル
video.variantsに各種URL
これからURLを取得する必要があるが、URLは増減しそうだし文字列抽出があるのでやや面倒。GPTでショートカットする。
code:zsh
"video": {
"aspectRatio": [
4,
3
],
"contentType": "media_entity",
"durationMs": 25375,
"mediaAvailability": {
"status": "available"
},
"variants": [
{
"type": "video/mp4",
},
{
"type": "video/mp4",
},
{
"type": "application/x-mpegURL",
},
{
"type": "video/mp4",
}
],
"videoId": {
"type": "tweet",
"id": "1637231593432707073"
},
"viewCount": 1524426
}
問題を定義してChatGPTに渡す
ChatGPT.icon （要約 by 基素.icon）まず最大の解像度をURLから取得し、そのURLを取得するという方法。
あまりスマートではないと感じた基素.icon
以下は、与えられたjsonから、動画の解像度が最も大きいものを取得するJavaScriptコードの例です。もし解像度が大きなものがない場合は、最も小さい解像度の動画を取得します。
code:js
const variants = [
{
type: "video/mp4",
},
{
type: "video/mp4",
},
{
type: "application/x-mpegURL",
},
{
type: "video/mp4",
}
];
let maxResolution = 0;
let videoUrl = null;
variants.forEach((variant) => {
const match = variant.src.match(/\/vid\/(\d+)x(\d+)\//);
if (match) {
const resolution = parseInt(match1) * parseInt(match2); if (resolution > maxResolution) {
maxResolution = resolution;
videoUrl = variant.src;
}
}
});
if (videoUrl == null) {
variants.forEach((variant) => {
if (variant.type === "video/mp4") {
videoUrl = variant.src;
return;
}
});
}
console.log(videoUrl);
このコードは、正規表現を使用して、動画URLから解像度を抽出し、解像度が最も大きい動画を選択します。もし解像度が大きなものがない場合は、最も小さい解像度の動画を選択します。最後に、選択された動画のURLをコンソールに出力します。
GPT-4.icon（要約 by 基素.icon）mp4の動画に対して解像度をループして大きければURLを入れかえるという方法
GPT-3.5よりループが少なく、スマートだと感じた基素.icon
以下のJavaScriptコードは、与えられたJSONから最も高い解像度の動画を取得する方法を示しています。
code:js
const json = {
"variants": [
{
"type": "video/mp4",
},
{
"type": "video/mp4",
},
{
"type": "application/x-mpegURL",
},
{
"type": "video/mp4",
}
]
};
function getHighestResolutionVideo(variants) {
let highestResolution = -1;
let highestResolutionVideoSrc = null;
for (const variant of variants) {
if (variant.type === 'video/mp4') {
const width, height = variant.src.match(/\d+x\d+/)0.split('x').map(Number); const resolution = width * height;
if (resolution > highestResolution) {
highestResolution = resolution;
highestResolutionVideoSrc = variant.src;
}
}
}
return highestResolutionVideoSrc;
}
const highestResolutionVideoSrc = getHighestResolutionVideo(json.variants);
console.log(highestResolutionVideoSrc);
このコードは、variants 配列内の各動画に対して、video/mp4 タイプの動画を探し、最も高い解像度を持つ動画のURLを取得します。getHighestResolutionVideo 関数は、最も高い解像度の動画URLを返します。
ここまでくるとGitじゃないと辛い
![https://pbs.twimg.com/ext_tw_video_thumb/1637231504135979008/pu/img/fovpeMW5PhoHOzNO.jpg",](https://pbs.twimg.com/ext_tw_video_thumb/1637231504135979008/pu/img/fovpeMW5PhoHOzNO.jpg",){kind=link}